<%@page contentType="text/html" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery-3.6.0.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>

    <script src="/layer/layer.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#loginAct').blur(function(event){
                var outNameStr = $.trim($(this).val());
                $(this).val(outNameStr);
                if(outNameStr == ""){
                    $('#msg').text('请输入用户名及密码');
                }else{
                    $.get('/login_verification.action',{user_name:outNameStr},data =>{
                        if(data == "\"true\""){
                            $('#msg').text('请输入密码,然后点击登录');
                        }else{
                            $('#msg').text('该用户不存在!');
                        }
                    });
                }
            });
            $('body').keypress(function(event) {
                if(event.keyCode == 13){
                    clickBtn();
                }
            });

        })
        function clickBtn(){
            var outNameStr = $.trim($('#loginAct').val());
            $.get('/login_confirm.action',{user_name:outNameStr,user_password:$('#loginPwd').val(),
        captcha:$('#captchaText').val()}, function(data) {
                if(data == "\"all_correct\""){
                    $('#msg').text('正在跳转,请稍后');
                    location.href = '/main';
                }else if(data == "\"captcha_error\""){
                    layer.alert("验证码错误",{icon: 5});
                }else{
                    layer.alert("请输入正确的用户名和密码",{icon: 5});
                }
            });
        }


        function genTimestamp() {  
            var time = new Date();  
            return time.getTime();  
        } 
        function getCaptcha(){
            $("#createImg").attr("src", "/login_getVerificationCode.action?t=" + genTimestamp());
        }

        function onInputKeyup(){
            $.get('/match_captcha.action',{captcha:$('#captchaText').val()},function(data){
                if(data == "\"correct\""){
                    $('#captchaResult').text('验证码正确');
                }else{
                    $('#captchaResult').text('验证码错误');
                }
            });
        }


    </script>
    <!-- <script src="/crm/jquery/layer/layer.js"></script> -->
</head>
<body>

<div id="top" style="height: 50px; background-color: #3C3C3C; width: 100%;">
    <div style="position: absolute; top: 5px; left: 0px; font-size: 30px; font-weight: 400; color: white; font-family: 'times new roman'">一起哈皮 &nbsp;<span style="font-size: 12px;">&copy;各位&nbsp;欢迎来到海绵宝宝的世界!</span></div>
</div>
<div style="position: absolute; top: 0px; left: 0px; width: 60%;">
    <img src="/images/portraits/portrait2.jpg" style="width: 60%; position: relative; top: 50px;">
</div>

<div style="position: absolute; top: 120px; right: 100px;width:450px;height:400px;border:1px solid #D5D5D5">

    <div style="position: absolute; top: 0px; right: 60px;">
        <div class="page-header">
            <h1>欢迎登录</h1>
        </div>
        <form action="NULL" class="form-horizontal" role="form" method="get" onsubmit="return false">
            <div class="form-group form-group-lg">
                <div style="width: 350px;">
                    <input class="form-control" id="loginAct" type="text" placeholder="用户名">
                </div>
                <div style="width: 350px; position: relative;top: 20px;">
                    <input class="form-control" id="loginPwd" type="password" placeholder="密码">
                </div>

                <div class="lg-username input-item clearfix" style="width: 350px; position: relative;top: 30px;">
                    <input type="text" placeholder="输入验证码" id="captchaText" onkeyup="onInputKeyup();" style="width:105px;" />
                        <img src="/login_getVerificationCode.action" id="createImg" onclick="getCaptcha();" align="middle" style="width:150px;" alt="点击获得验证码" title="点击更换验证码" /> 
                    <i id="captchaResult"></i>
                    <br>
                    <p>验证码区分大小写,点击验证码图片进行刷新</p>
                </div>

                <div class="checkbox"  style="position: relative;top: 30px; left: 10px;">
                    <span id="msg">请输入用户名及密码</span>
                </div>
                <button type="submit" id="loginBtn" onclick="clickBtn()" class="btn btn-primary btn-lg btn-block"  style="width: 350px; position: relative;top: 45px;">登录</button>
            </div>
        </form>
    </div>
</div>


</body>
</html>